<template>
  <div>
    <MainNavBar>
      <template #center-name> 竞赛规程 </template>
    </MainNavBar>
    <div class="container">
      <div class="info">
        <div class="main">
          <div
            class="context"
            v-for="(item, index) in state.detail"
            :key="item.id"
          >
            <div class="show-fixed">
              <div
                class="video"
                @click="play(index)"
              >
              
                <video
                  :id="'vdo' + index"
                  webkit-playsinline="webkit-playsinline"
                  playsinline="true"
                  preload="auto"
                  mediatype="video"
                  :poster="item.img"
                  :controls="state.isPlay"
                >
                  <source type="video/mp4" :src="item.video" />
                </video>

                <img
                  class="onplay"
                  v-show="state.currentPalyingVideoIndex !== index"
                  src="http://qnticao.laigl.com/vue/Play.png"
                  alt=""
                />
                <img
                  class="onplay"
                  v-show="
                    state.currentPalyingVideoIndex == index &&
                    state.isPlay == false
                  "
                  src="http://qnticao.laigl.com/vue/Play.png"
                  alt=""
                />
              </div>
              <div class="title">
                <!-- 男子3级等级动作 -->
                {{ item.name }}
                <button @click="copyDownLoadUrl" v-if="item.is_pay == 1">点击复制视频下载链接</button>
                <input type="text" v-model="item.video" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;">
              </div>
              <div class="line">
                <div class="bgc"></div>
              </div>
            </div>
            <div class="content">
              <div class="item">
                <!-- <div class="name">
                  1.自由体操
                  {{ item.name }}
                </div> -->
                <div class="detail" v-html="item.action_intro"></div>
                <!-- <div class="detail">北京市北京市东城区北京北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区北京市北京市东城区</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ mask: showMask }"></div>
    </div>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { request } from "@/network/request.js";
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { Toast } from "vant";
export default {
  components: {
    MainNavBar,
  },
  setup() {
    const route = useRoute();
    const showMask = ref(true);
    const state = reactive({
      detail: [],
      currentPalyingVideoIndex: null,
      isPlay: false,
      currentTime: [],
    });
    const getComputedStyle = () => {
      return (
        window.parseFloat(
          window.getComputedStyle(document.querySelector(".container")).height
        ) +
        window.parseFloat(
          window.getComputedStyle(document.querySelector(".main-nav")).height
        )
      );
    };
    const changeMask = () => {
      if (
        Math.abs(
          document.documentElement.scrollTop +
            document.documentElement.clientHeight -
            getComputedStyle()
        ) < 5
      ) {
        return (showMask.value = false);
      }
      showMask.value = true;
    };
    const getDetail = async () => {
      let data = {};
      if (route.query.currentIndex == 1) {
        data = {
          level_id: route.query.level_id,
          compet_id: route.query.match_id,
          token:sessionStorage.getItem("token")
        };
      } else {
        data = {
          id: route.query.id,
          token:sessionStorage.getItem("token")
        };
      }
      const res = await request({
        url: "v1/competition/actionDetails",
        data,
      });
      if (res.data.rows.length === 0) {
        Toast("暂无内容");
      }
      state.detail = res.data.rows;
      document.documentElement.scrollTop = 0;
    };
    const play = (index) => {
      const lastVideo = document.querySelector(
        `#vdo${state.currentPalyingVideoIndex}`
      );
      const video = document.querySelector(`#vdo${index}`);
      if (state.currentPalyingVideoIndex === index) {
        if (state.isPlay === true) {
          lastVideo.pause();
          state.isPlay = false;
        } else {
          lastVideo.play();
          state.isPlay = true;
        }
      } else {
        console.log(false);
        if (lastVideo) {
          lastVideo.pause();
        }
        video.play();
        state.isPlay = true;
      }
      state.currentPalyingVideoIndex = index;
    };
    const copyDownLoadUrl = ()=>{
     let ipt =  document.querySelector(".title input");
    //  console.log(ipt.value);
      ipt.select();
      document.execCommand("copy");
      Toast.success("复制成功");
    }
    onMounted(() => {
      getDetail();
      changeMask();
      window.scrollTo(0, 0);
      window.addEventListener("scroll", changeMask);
    });
    onUnmounted(() => {
      window.removeEventListener("scroll", changeMask);
    });
    return { showMask, state, play ,copyDownLoadUrl};
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: calc(100vh - 13.333vw);
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-repeat: repeat;
  background-color: #0054a6;
  // background-color:;
  // background: hsla(0,0%,100%,.25) border-box;   
  position: relative;
  background-size: 100% auto;
  // box-sizing: border-box;
  overflow: hidden;
  .show-fixed{
    position: absolute;  
  }
  .onplay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 5;
    vertical-align: middle;
    width: 12.533vw !important;
    height: 12.533vw;
  }
  // overflow: hidden;
  .mask {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22.4vw;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 100%
    );
  }
  .info {
    margin-top: 33.867vw;
    box-sizing: border-box;
    // margin-top: 33.867vw;
    padding: 0 6.133vw 30px  6.133vw;
    padding-top: 26.667vw;
    width: 100%;
    height: calc(100vh - 33.867vw - 13.333vw);
    // min-height: 168.667vw;
    background-color: #fff;
    border-top-right-radius: 5.333vw;
    border-top-left-radius: 5.333vw;
    -webkit-appearance: none;
    position: relative;
    .main {
      position: absolute;
      left: auto;
      right: auto;
      top: -26.667vw;
      // background-color:#fff;
      // margin-top: -26.667vw;
    }
    .video {
      width: 88vw;
      position: absolute;
      // left: auto;
      // right: auto;
      // top: -26.667vw;
      height: 52.533vw;
      // background-color:red;
      margin: 0 auto;
      overflow: hidden;
      //   background-color: red;
      border-radius: 3.2vw;
      -webkit-appearance: none;
      box-shadow: 0 16.001px 24px -5.001px rgba(0, 84, 66, 0.2);
      img {
        width: 100%;
      }
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        // object-fit: contain;
      }
    }
    .title {
      margin-top: 58.667vw;
      font-size: 5.6vw;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 7.733vw;
      margin-bottom: 2.933vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      // box-shadow: 0px 10px 42px -22px #CED3E0;
      button{
        font-size: 3.733vw;
        border: none;
        background-color: #0054a6;
        color: #fff;
        border-radius: 4vw;
      }
    }
    .line{
      width: 88vw;
      height: 2.667vw;
      // border-radius: 50%;
      z-index: 0;
      overflow: hidden;
      position: relative;
      // background: linear-gradient(to bottom, rgba(206, 211, 224, .1) 0, rgba(255, 255, 255, 1) 100%);
      // filter: blur(3px);
      // background-color: rgba(206, 211, 224, .1) ;
      .bgc{
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 6.333vw;
        // background-color: red;
         background: linear-gradient(to bottom, rgba(182, 182, 182, .1) 0, rgba(255, 255, 255, 1) 100%);
         border-radius: 50%;
         -webkit-appearance: none;
      }
    }
    .content {
      position: absolute;
      top: 69.134vw;
      overflow-y: scroll;
      padding-bottom: 8vw;
      height: 83.667vw;
      box-sizing: content-box;
      z-index: 1;
      .item {
        padding-bottom: 5.333vw;
        .name {
          height: 5.867vw;
          font-size: 4.267vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 5.867vw;
          margin-bottom: 2.4vw;
        }
        .detail {
          width: 86.133vw ;
          font-size: 3.2vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 5.333vw;
          // padding-left: 2.933vw;
        }
      }
    }
  }
}
</style>